<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/plugins/Buttons-1.4.0/css/buttons.bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="/static/plugins/bootstrapvalidator/dist/css/bootstrapValidator.min.css" />
		<style type="text/css">
			.insert {
				width: 100%;
				min-height: 200px;
				margin: 0 auto;
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				border-radius: 10px;
				text-align: center;
				background-color: #ECF0F5;
			}
			
			.modal-content {
				border-radius: 20px;
			}
			
			.title {
				font-size: 24px;
				font-weight: bold;
				line-height: 40px;
				margin-bottom: 20px;
			}
			
			.main {
				width: 280px;
				margin: 0 auto;
				text-align: left;
			}
			
			.black {
				font-size: 25px;
				float: right;
			}
			
			.marginLeft {
				margin-left: 45px;
			}
			
			.error1,
			.error2,
			.error3,
			.error4,
			.error5,
			.error6 {
				display: none;
				color: red;
				font-size: 12px;
			}
			
			.inputTitle {
				display: inline-block;
				width: 100px;
				text-align: right;
			}
		</style>
	</head>

	<body>
		<div class="insert">
			<div class="title">
				新增角色
			</div>
			<div class="main">
				<p><span class="inputTille">级别名称：</span><input type="textt" name="roleName" id="roleName" value="" /></p>
				<p class="error5"></p>
				<p><span class="inputTille">权限等级：</span><input type="text" name="roleLv" id="roleLv" value="" placeholder="数字代表等级" /></p>
				<p class="error6"></p>
				<p><button class="" type="button" data-dismiss="modal">取消</button><button class="marginLeft submit" data-dismiss="">提交</button>
					<button class=" marginLeft" type="button" data-dismiss="modal">返回</button>
				</p>
			</div>
		</div>
		<script src="/static/plugins/Buttons-1.4.0/js/buttons.bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/plugins/bootstrapvalidator/dist/js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var table2 = $("#userRole_table").DataTable();
				$(".submit").click(function() {
					var rolename = $("#roleName").val();
					var rolelv = $("#roleLv").val();
					var isgo = true;
					if(rolename == "") {
						isgo = false;
						$(".error5").css("display", "block");
						$(".error5").html("权限名称不能为空！");
					} else {
						$(".error5").css("display", "none");
					}
					if(rolelv == "") {
						isgo = false;
						$(".error6").css("display", "block");
						$(".error6").html("权限等级不能为空！");
					} else {
						$(".error6").css("display", "none");
					}
					if(isgo == true) {
						$.ajax({
							type: "post",
							url: "/select/role",
							data: {
								rolelv: rolelv
							},
							async: true,
							success: function(data) {
								if(data != 'a') {
									$(".error6").css("display", "block");
									$(".error6").html("权限等级已存在！");
								} else {
									$.ajax({
										type: "post",
										url: "/role/add",
										data: {
											rolename: rolename,
											rolelv: rolelv
										},
										success: function(data) {
											console.log(data);
											if(data == '101') {
												alert("添加成功");
												table2.draw(false);
											} else {
												alert("添加失败");
											}
										}
									});
								}
							}
						});
					}
				});

			});
		</script>
	</body>

</html>